<template>
  <div class="game-category-box"
       @click="handleClick(props.item.id)"
       :style="{backgroundImage:`url(${props.item?props.item.bg:'../src/assets/icons/game-bg3.png'})`}"
     >
    <div class="game-category-icon"
         :style="{backgroundImage:`url(${props.item?props.item.icon:'../src/assets/icons/game-bg3.png'})`}"></div>
    <div class="game-category-label">{{ props.item ? props.item.label : '竞技' }}</div>
    <div class="game-category-numbers">{{ props.item ? props.item.numbers : '56666人在玩' }}</div>
    <div class="game-category-btn"></div>

  </div>
</template>

<script setup lang="ts">
import {ref} from "vue";

const props = defineProps({
      item: {
        required: true
      },
    }
)
const currentItem = ref(0)

const handleClick = (id: number) => {
  console.log(id)

  currentItem.value = id;
}

</script>

<style lang="less" scoped>
.active{
  transform: scale(1);
}
.game-category-box:hover{
  transition: 0.5s all ease;
  transform: scale(1);
}
.game-category-box {
  color: white;
  width: 100%;
  position: relative;
  height: 80%;
  transition: 0.5s all ease;

  box-shadow: rgba(0, 0, 0, 0.4) 0 2px 4px,
  rgba(0, 0, 0, 0.3) 0 7px 13px -3px,
  rgba(0, 0, 0, 0.2) 0px -3px 0px inset;
  transform: scale(0.9);
  background-image: url("@/assets/icons/game-bg3.png");
  background-size: 100% 100%;

  .game-category-label {
    font-size: 30px;
    position: absolute;
    color: black;
    right: 20px;
    bottom: 40px;
  }

  .game-category-numbers {
    left: 20px;
    position: absolute;
    bottom: 20px;
  }

  .game-category-btn {

    width: 100%;
    height: 100%;
    z-index: 10;
    background-image: url("@/assets/icons/white-btn.png");
    background-repeat: no-repeat;
    background-position: center;
    background-size: 50%;
    position: absolute;
    top: -20px;
    left: -20px;
  }

  .game-category-icon {
    width: 60%;
    height: 100%;
    background-size: 70%;
    position: absolute;
    top: -75px;
    right: -40px;
    transform: rotate(30deg);
    background-image: url("@/assets/icons/sword.png");
    background-repeat: no-repeat;
    background-position: center;
  }
}
</style>